<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
    cancelText="关闭">

    <table id="table_report" class="table table-striped table-bordered table-hover">

      <tr>
        <td style="width:90px;text-align: right;padding-top: 80px;padding-bottom: 80px">基本信息:</td>
        <td>
          <p style="float: left;">


            车位编号：<span id="plateNo">
           {{ result.parkNumber }}
                    </span><br>

            有效期开始时间：<span id="startTime">
            {{result.startTime}}
          </span><br>
            有效期结束时间：<span id="endTime">
            {{result.endTime}}
          </span><br>
            租户姓名：<span id="userName">
           {{ result.userName }}
                    </span><br>


            租户手机号码：<span id="mobile">
           {{ result.mobile }}
                    </span><br>


            家庭住址：<span id="address">
           {{ result.address }}
                    </span><br>
            车位备注：<span id="remark">
           {{ result.remark }}
                    </span>
          </p>
        </td>
      </tr>

      <tr>
        <td style="width:90px;text-align: right;padding-top: 45px;">详情:</td>
        <td>
          <p style="float: left;">

            已绑定的车牌号：<span id="parkCarMonthlyList">
            {{parkMonthlyCarList}}
                     </span><br><br><br>
            修改时间：<span id="updateTime">
           {{ result.updateTime }}
                    </span><br>
            创建人：<span id="createUser">
           {{ result.createUser }}
                    </span><br>
            创建时间：<span id="createTime">
           {{ result.createTime }}
                    </span>
          </p>
        </td>
      </tr>

      <tr>
        <td style="text-align: center;" colspan="10">
          <a-button type="primary" @click="close">关闭</a-button>
        </td>
      </tr>
    </table>

  </a-modal>
</template>

<script>
import {postAction} from '@api/manage'


export default {
  name: "ParkCarStoredModal",
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      result: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        loadMonthlyCarList:"/parkCar/parkNumber/queryCarList"
      },
      carTypeList: [],
      parkMonthlyCarList:''
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      Object.assign(this.result, record);
      this.visible = true;
      this.parkMonthlyCarList = ''
      this.loadMonthlyCarList()
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleCancel() {
      this.close()
    },
    loadMonthlyCarList(){
      const that = this
      let params = {}
      params.parkNumber = this.result.parkNumber
      postAction(this.url.loadMonthlyCarList,params).then(res=>{
        if(res.success)
        {
          let index = 0
          if(res.result.length!==0)
          {
            res.result.forEach(res=>{
              if(index === 0)
              {
                that.parkMonthlyCarList = res.plateNo
              }else
              {
                that.parkMonthlyCarList = that.parkMonthlyCarList + ","+res.plateNo
              }
              index++
            })
          }

        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
